<template>
  <div class="evaluateAdd" v-loading="detailInfoShow">
    <!-- 筛选按钮 -->
    <div class="search-button" v-if="pageType !== 'detail'">
      <el-button
        v-if="pageType !== 'detail'"
        class="btn save"
        @click="handleAddSave(evaluateFormRef)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >保存</el-button
      >
      <el-button class="btn back" @click="handleBack"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon
        >返回</el-button
      >
    </div>
    <el-collapse v-model="activeNames">
      <!-- 基础信息 -->
      <el-collapse-item
        name="1"
        v-if="pageType !== 'detail'"
        class="transform-down"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">基本信息</span>
        </template>
        <div class="evaluate-info">
          <!-- :rules="queryRules" -->
          <el-form
            :model="evaluateForm"
            ref="evaluateFormRef"
            label-width="100px"
            v-enterToNext
            :disabled="pageType === 'detail'"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="供应商单位名称：" label-width="140">
                  <el-input
                    v-model="evaluateForm.supplierName"
                    placeholder=""
                    clearable
                    disabled
                    class="search-input"
                    label-width="110"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="评分人：" label-width="140">
                  <el-input
                    v-model="evaluateForm.evaluateName"
                    placeholder=""
                    clearable
                    disabled
                    class="search-input"
                    label-width="110"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="评价日期：" label-width="140">
                  <el-input
                    v-model="evaluateForm.creatTime"
                    placeholder=""
                    clearable
                    disabled
                    class="search-input"
                    label-width="110"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item
        name="2"
        style="position: relative"
        class="transform-down"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">评价信息</span>
        </template>
        <div class="evaluate-content">
          <div class="evaluate-top">
            <div class="evaluate-top-item item1">
              <span>考核项目(分)</span>
            </div>
            <div class="evaluate-top-item item2">
              <span>评分标准</span>
            </div>
            <div class="evaluate-top-item item3">
              <span>评分</span>
            </div>
            <div class="evaluate-top-item item4">
              <span>评价等级(得分)</span>
            </div>
          </div>
          <div style="display: flex">
            <div>
              <div class="evaluate-price">
                <div class="evaluate-price-item item1 pl20">
                  <span>价格水平（满分25）</span>
                </div>
                <div class="evaluate-price-item item2 price-flex">
                  <div>
                    <div class="item-text">
                      <span>低于历史最低价5%~10%</span>
                    </div>
                    <div class="item-text">
                      <span>保持历史最低价</span>
                    </div>
                    <div class="item-text">
                      <span>高于历史最低价3%</span>
                    </div>
                  </div>
                  <div>
                    <div class="item-text item-number">
                      <span>23—25</span>
                    </div>
                    <div class="item-text item-number">
                      <span>11—22</span>
                    </div>
                    <div class="item-text item-number">
                      <span>0—10</span>
                    </div>
                  </div>
                </div>
                <div class="evaluate-price-item item3 small-mark">
                  <span class="required-mark">*</span>
                  <el-input
                    ref="refInput"
                    v-model="evaluateForm.priceStandardScore"
                    type="Number"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    @blur="handleTotal"
                    :disabled="pageType === 'detail'"
                    @input="
                      evaluateForm.priceStandardScore = Math.max(
                        Math.min(evaluateForm.priceStandardScore, 25),
                        0
                      )
                    "
                    :rules="[
                      {
                        required: true,
                        message: '用户名不能为空',
                        trigger: 'blur',
                      },
                    ]"
                  />
                </div>
              </div>
              <div class="evaluate-price h200">
                <div
                  class="evaluate-price-item item1 pl20"
                  style="height: 200px; line-height: 200px"
                >
                  <span>品质状况（满分30）</span>
                </div>
                <div
                  class="evaluate-price-item item2 price-flex"
                  style="height: 200px; line-height: 200px"
                >
                  <div>
                    <div class="item-text">
                      <span>合格率81%~100%</span>
                    </div>
                    <div class="item-text">
                      <span>合格率61%~80%</span>
                    </div>
                    <div class="item-text">
                      <span>合格率51%~60%</span>
                    </div>
                    <div class="item-text">
                      <span>合格率低于50%</span>
                    </div>
                  </div>
                  <div>
                    <div class="item-text item-number">
                      <span>26-30</span>
                    </div>
                    <div class="item-text item-number">
                      <span>16-25</span>
                    </div>
                    <div class="item-text item-number">
                      <span>11—15</span>
                    </div>
                    <div class="item-text item-number">
                      <span>0—10</span>
                    </div>
                  </div>
                </div>
                <div
                  class="evaluate-price-item item3 small-mark"
                  style="height: 200px; line-height: 200px"
                >
                  <span class="required-mark">*</span>
                  <el-input
                    v-model="evaluateForm.qualityStandardScore"
                    type="Number"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    @blur="handleTotal"
                    :disabled="pageType === 'detail'"
                    @input="
                      evaluateForm.qualityStandardScore = Math.max(
                        Math.min(evaluateForm.qualityStandardScore, 30),
                        0
                      )
                    "
                  />
                </div>
              </div>
              <div class="evaluate-price">
                <div class="evaluate-price-item item1 pl20">
                  <span>服务质量（满分25）</span>
                </div>
                <div class="evaluate-price-item item2 price-flex">
                  <div>
                    <div class="item-text">
                      <span>服务响应24小时内，给出处理方案</span>
                    </div>
                    <div class="item-text">
                      <span>偶尔拖延服务时间，能给出处理方案</span>
                    </div>
                    <div class="item-text">
                      <span>经常拖延，不能及时给出处理方案</span>
                    </div>
                  </div>
                  <div>
                    <div class="item-text item-number">
                      <span>23—25</span>
                    </div>
                    <div class="item-text item-number">
                      <span>11—22</span>
                    </div>
                    <div class="item-text item-number">
                      <span>0—10</span>
                    </div>
                  </div>
                </div>
                <div class="evaluate-price-item item3 small-mark">
                  <span class="required-mark">*</span>
                  <el-input
                    v-model="evaluateForm.serviceStandardScore"
                    type="Number"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    @blur="handleTotal"
                    :disabled="pageType === 'detail'"
                    @input="
                      evaluateForm.serviceStandardScore = Math.max(
                        Math.min(evaluateForm.serviceStandardScore, 25),
                        0
                      )
                    "
                  />
                </div>
              </div>
              <div class="evaluate-price">
                <div class="evaluate-price-item item1 pl20">
                  <span>交货情况（满分20）</span>
                </div>
                <div class="evaluate-price-item item2 price-flex">
                  <div>
                    <div class="item-text">
                      <span>按时交货</span>
                    </div>
                    <div class="item-text">
                      <span>延期交货，可满足客户交期要求</span>
                    </div>
                    <div class="item-text">
                      <span>延期交货，无法满足客户交期要求</span>
                    </div>
                  </div>
                  <div>
                    <div class="item-text item-number">
                      <span>23—25</span>
                    </div>
                    <div class="item-text item-number">
                      <span>11—22</span>
                    </div>
                    <div class="item-text item-number">
                      <span>0—10</span>
                    </div>
                  </div>
                </div>
                <div class="evaluate-price-item item3 small-mark">
                  <span class="required-mark">*</span>
                  <el-input
                    v-model="evaluateForm.deliveryStandardScore"
                    type="Number"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    @blur="handleTotal"
                    :disabled="pageType === 'detail'"
                    @input="
                      evaluateForm.deliveryStandardScore = Math.max(
                        Math.min(evaluateForm.deliveryStandardScore, 20),
                        0
                      )
                    "
                  />
                </div>
              </div>
            </div>
            <div class="evaluate-total item4">
              <el-input
                v-model="evaluateForm.totalScore"
                placeholder="总分数"
                disabled
                clearable
                class="search-input"
              />
              <div class="evaluate-fotter">
                注：评分规则 90~100 优秀 80~89 良好 <br />
                70~79 合格 0~60 不合格
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { addSupplierApi, getSupplierInfoApi } from "@/api/information/supplier";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits([
  // 刷新父组件表格数据
  "refreshList",
  // 更新评价组件显隐
  "update:evaluateAddShow",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);
// 评价表单引用
const evaluateFormRef = ref();
// 详情加载效果
const detailInfoShow = ref(false);
// 输入框引用
const refInput = ref();
// 评价表单数据模板
const evaluateFormTemplate = {
  supplierId: null, //供应商
  priceStandardScore: null, //价格标准评分
  serviceStandardScore: null, //服务标准评分
  qualityStandardScore: null, //质量标准评分
  deliveryStandardScore: null, //按时交货标准评分
  creditStandardScore: null, //信用标准评分
  totalScore: null, //总分
  supplierName: "",
  evaluateName: "",
  creatTime: "",
};
const data = reactive({
  // 评价表单
  evaluateForm: JSON.parse(JSON.stringify(evaluateFormTemplate)),
});
const { evaluateForm } = toRefs(data);

/**
 * @description: 保存
 * @param {Object} evaluateFormRef 评价表单引用
 */
const handleAddSave = async (evaluateFormRef) => {
  if (!evaluateFormRef) return;
  await evaluateFormRef.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          //评分校验
          if (evaluateForm.value.priceStandardScore == null)
            return ElMessage.error("请输入价格水平评分");
          if (evaluateForm.value.qualityStandardScore == null)
            return ElMessage.error("请输入品质状况评分");
          if (evaluateForm.value.serviceStandardScore == null)
            return ElMessage.error("请输入服务质量评分");
          if (evaluateForm.value.deliveryStandardScore == null)
            return ElMessage.error("请输入交货情况评分");
          const res = await addSupplierApi(evaluateForm.value);
          if (res.code === 200) {
            emit("update:evaluateAddShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            evaluateForm.value = JSON.parse(
              JSON.stringify(evaluateFormTemplate)
            );
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};

/**
 * @description: 处理总评分
 */
const handleTotal = () => {
  const {
    priceStandardScore,
    serviceStandardScore,
    qualityStandardScore,
    deliveryStandardScore,
  } = evaluateForm.value;
  evaluateForm.value.totalScore =
    Number(priceStandardScore) +
    Number(serviceStandardScore) +
    Number(qualityStandardScore) +
    Number(deliveryStandardScore);
};

/**
 * @description: 返回
 */
const handleBack = () => {
  ElMessageBox.confirm("确定返回上一级吗?以上数据未保存将会丢失!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
  })
    .then(async () => {
      emit("update:evaluateAddShow", false);
      evaluateForm.value = JSON.parse(JSON.stringify(evaluateFormTemplate));
    })
    .catch(() => {});
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {
    evaluateForm.value.supplierId = id;
    const res = await getSupplierInfoApi(id);
    if (res) {
      if (props.pageType === "detail") {
        evaluateForm.value = res;
      } else {
        evaluateForm.value.supplierName = res.supplierName;
        evaluateForm.value.evaluateName = res.evaluateName;
        evaluateForm.value.creatTime = res.creatTime;
      }
    }
  } catch (error) {
    console.log(error);
  }
};

onMounted(() => {
  if (props.pageType === "evaluate") {
    nextTick(() => {
      refInput.value.focus(); // 聚焦
    });
  }
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  background-color: #f8faff;
}
.evaluateAdd {
  padding: 20px 30px;
  width: 100%;
  height: 100%;

  .search-input {
    width: 268px;
    height: 34px;
  }
  .evaluate-info {
    padding: 20px 10px 5px 10px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .evaluate-content {
    position: relative;
    padding-top: 20px;
    .evaluate-top {
      background-color: #f8f8f9;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      .evaluate-top-item {
        border: 1px solid #f1f1f1;
        border-right: none;
        border-bottom: none;
        height: 50px;
        line-height: 50px;
        text-align: center;
        flex-shrink: 0;
      }
    }
    .evaluate-price {
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;

      .evaluate-price-item {
        height: 150px;
        line-height: 150px;
        border: 1px solid #f1f1f1;
        border-right: none;
        border-top: none;
        .item-text {
          width: 425px;
          padding-left: 20px;
          height: 50px;
          line-height: 50px;
          border-right: 1px solid #f1f1f1;
          border-bottom: 1px solid #f1f1f1;
        }
        .item-number {
          width: 165px;
          border-right: none;
        }
        .required-mark {
          color: red;
          margin-right: 5px;
          margin-top: 5px;
          font-size: 18px;
        }
      }
      .price-flex {
        line-height: 0;
        display: flex;
      }
    }
    .evaluate-total {
      height: 650px;
      border: 1px solid #f1f1f1;
      border-top: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .evaluate-fotter {
        transform: translateY(235px);
      }
    }
    .small-mark {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pl20 {
      padding-left: 20px;
    }
    .h200 {
      height: 200px;
    }
    .item1 {
      width: 250px;
    }
    .item2 {
      width: 590px;
    }
    .item3 {
      width: 360px;
    }
    .item4 {
      width: calc(100% - 1200px);
    }
  }
}
</style>
